<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>框模型-边框-样式</title>
    <style>
        div{
            margin: 10px;
        }
        .none{
            border-style: none;
        }
        .hidden{
            border-style: hidden;
        }
        .dotted{
            border-style: dotted;
        }
        .dashed{
            border-style: dashed;
        }
        .solid{
            border-style: solid
        }
        .double{
            border-style: double;
        }
        .groove{
            border-style: groove;
        }
        .ridge{
            border-style: ridge;
        }
        .inset{
            border-style: inset;
        }
        .outset{
            border-style: outset;
        }
    </style>
</head>
<body>
    <div class="none">
        none
    </div>
    <div class="hidden">
        hidden
    </div>
    <div class="dotted">dotted</div>
    <div class="dashed">dashed</div>
    <div class="solid">solid</div>
    <div class="double">double</div>
    <div class="groove">groove</div>
    <div class="ridge">ridge</div>
    <div class="inset">inset</div>
    <div class="outset">outset</div>
</body>